<template>
	<view class="index">
<!-- 		<view class="search">
			<navigator url="/pages/search/search" class="input">
				<image class="icon" />
				<text class="txt">商品搜索,</text>
			</navigator>
		</view> -->
		<!-- 		<view class="uni-grid-9">
			<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" v-for="(item,index) in tabs" :key="index" :class="index % 4 === 3 ? 'no-border-right' : ''"
			 @click="goTo(item)">
				<image class="uni-grid-9-image" :src="item.imgUrl"></image>
				<text class="uni-grid-9-text">{{item.text}}</text>
			</view>
		</view> -->
		<view v-for="(show, index2)  in shows" :key="index2">
			<card :data="show" @click="onNavigator" @addPartyUpvote="addUpvote"></card>
		</view>
		<load-more :loadingType="loadingType" :contentText="contentText" ></load-more>
		<view class="color-floating-button">
			<view class="uni-card-unlink uni-icon uni-icon-add" @click="publish"></view>
		</view>
	</view>
</template>

<script>
	import {
		getUrl
	} from '@/common/oss';
	import {
		page,
		addPartyUpvote
	} from '@/api/cms/page.js';
	import {
		All
	} from '@/api/cms/category';
	import card from '@/components/card.vue';
	import loadMore from '@/components/load-more.vue'

	import uniIcon from '@/components/uni-icon.vue'
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	
	var CurrentSocketTask, socketOpen = false;

	export default {
		components: {
			card,
			uniIcon,
			loadMore
			// colorSearch
		},
		data() {
			return {
				showLeftButton: false,
				titleText: '首页',
				pageLoad: false,
				title: "食色秀",
				dicts: [
					"浏览",
					"点赞",
					"评论"
				],
				page: 1,
				orderBy: "hotValue",
				sort: "desc",
				reload: false,
				tabs: [

				],
				secMenu: [{
						text: '来一发',
						imgUrl: '../../../static/image/found/vertical.png',
						navigatePage: 'pose',
						navigateValue: 0
					},
					{
						text: '每日签到',
						imgUrl: '../../../static/image/found/signature.png',
						navigatePage: 'sign',
						navigateValue: 0
					},
					{
						text: '魅力榜单',
						imgUrl: '../../../static/image/found/charm.png',
						navigatePage: 'rank/index',
						navigateValue: 0
					},
					{
						text: '贡献榜单',
						imgUrl: '../../../static/image/found/contribute.png',
						navigatePage: 'rank/index',
						navigateValue: 1
					},
				],
				shows: [],
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				}
			}
		},
		computed: {
			...mapGetters(
				["hasLogin"],
			),
			...mapState({
				userInfo: state => state.user.userInfo,
			}),
		},
		
		onLoad: function() {
			this.tabs = [];
			this.shows = [];
			this.loadShows();
			
			console.log(JSON.stringify(getApp()))
		},
		onReady: function() {
		},
		onReachBottom: function() {
			if (this.loadingType !== 0) {
				return;
			}
			this.loadingType = 1;
			this.loadShows();
		},
		onPullDownRefresh: function() {
			this.reload = true;
			this.page = 1;
			this.loadShows();
		},
		onUnload: function() {
			this.scrollLeft = 0,
				this.isClickChange = false,
				this.currentTab = 0;
		},

		methods: {
			...mapMutations(
				["SET_TEST"]
			),
			addUpvote(e) {
				console.log("addUpvote:" + e.id)
				if (this.hasLogin) {
					addPartyUpvote({
						partyId: this.userInfo.partyId,
						showId: e.id
					}).then(res => {
						console.log(JSON.stringify(res))
						if (res.status == 200 && res.rel == true) {

							var showIndex = this.shows.findIndex(item => {
								return item.showId == e.id
							});
							console.log(JSON.stringify(this.shows[showIndex]))
							this.shows[showIndex].upvoteCount = this.shows[showIndex].upvoteCount + 1;
							console.log(this.shows[showIndex].upvoteCount);
							uni.showToast({
								title: res.data,
								icon: "none"
							})
						} else if (res.status == 200 && res.rel == true) {
							uni.showToast({
								title: res.data,
								icon: "none"
							})
						}
						console.log(JSON.stringify(res))
					});
				} else {
					this.onNavigatorLogin();
				}
			},
			onNavigator: function(e) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: e.url
					})
				} else {
					this.onNavigatorLogin();
				}

			},
			onNavigatorLogin: function() {
				uni.navigateTo({
					url: "/pages/security/login"
				})
			},
			publish: function() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/cms/push'
					})
				} else {
					this.onNavigatorLogin();
				}
			},
			goTo: function(e) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: e.navigatePage + "?navigateValue=" + e.navigateValue
					})
				} else {
					uni.navigateTo({
						url: "/pages/security/login"
					})
				}

			},
			loadShows: async function() {
					var that = this;

					page(that.getParams({}, that.page, 4, that.orderBy, that.sort)).then(function(res) {

						if (res.total > 0 && res.data.length > 0) {
							for (var i = 0; i < res.data.length; i++) {
								res.data[i].baseUrl = getUrl();
							}

							that.shows = that.reload ? res.data : that.shows.concat(res.data);
							that.reload = false;
							that.page = that.page + 1;
							that.pageLoad = true;
							that.loadingType = 0;
						} else {
							that.loadingType = 2
						}
						//console.log(JSON.stringify(that.shows))
						
					})
				},

				getParams: function(p, page, pageSize, orderBy, sort) {
					let params = p || {};
					params.showStatusId = "SHOW_CHECKED";
					params.page = page;
					params.limit = pageSize;
					params.orderBy = orderBy;
					params.sort = sort;
					return params
				},

		}

	}
</script>

<style>

	.index {
		display: flex;
		flex: 1;
		flex-direction: column;
		width: 750upx;
	}

	/* 	.uni-grid-9-item {
		width: 180px;
	} */

	.search {
		height: 88upx;
		width: 720upx;
		padding: 0 15upx;
		background: #fff;
		display: flex;
		align-items: center;
	}

	.search .input {
		width: 690upx;
		height: 56upx;
		background: #ededed;
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24upx;
	}

	.search .icon {
		background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png) center no-repeat;
			background-size: 100%;
		width: 28upx;
		height: 28upx;
	}

	.search .txt {
		height: 42upx;
		line-height: 42upx;
		color: #666;
		padding-left: 10upx;
		font-size: 30upx;
	}

	.color-floating-button {
		position: fixed;
		right: 10upx;
		bottom: 50upx;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		background-color: #ed6d53;
		color: #fff;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		opacity: .8;
		cursor: pointer;
	}
</style>
